import React from 'react';
import ReactDOM from 'react-dom';
import { AutoSizer, List, Table, Column } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

import './index.css';

// Grid data as an array of arrays
const list = [
    { no: 0, name: '小王', sex: '男', age: 32, country: "中国", description: 'Software engineer' }
    // And so on...
];

for (var i = 0; i < 200; i++) {
    list.push({ no: i, name: '小王', sex: '男', age: 32, country: "中国", description: 'Software engineer' });
}

function rowRenderer({ key, index, style }) {
    return (
        <div
            key={key}
            style={style}
        >
            {list[index].name}
        </div>
    )
}

// Grid data as an array of arrays
const list2 = [
    // And so on...
];

for (var i = 0; i < 200; i++) {
    list2.push({ no: i, name: '小王', sex: '男', age: 32, country: "中国", description: 'Software engineer' });
}


class FourView extends React.Component {

    render() {
        return (
            <AutoSizer>
                {({ height, width }) => (
                    <React.Fragment>

                        <Table
                            tabIndex={22}
                            disableHeader={true
                            }
                            estimatedRowSize={20}
                            autoHeight={false}
                            width={width}
                            height={500}
                            headerHeight={40}
                            rowHeight={40}
                            rowCount={list2.length}
                            rowGetter={({ index }) => list2[index]}
                        // noRowsRenderer={() => <div>empty</div>}
                        >
                            <Column
                                label='编号'
                                dataKey='no'
                                width={100}
                            />
                            <Column
                                label='姓名'
                                dataKey='name'
                                width={100}
                            />
                            <Column
                                label='年龄'
                                dataKey='age'
                                width={100}
                            />
                            <Column
                                label='性别'
                                dataKey='sex'
                                width={100}
                            />
                            <Column
                                label='编号'
                                dataKey='name'
                                width={100}
                            />
                            <Column
                                width={200}
                                label='职位'
                                dataKey='description'
                            />
                        </Table>

                    </React.Fragment>
                )}
            </AutoSizer>


        );
    }
}
export default FourView;